<template>
  <div class="card">
    <div class="title">
      <el-page-header
        content="添加文章"
        @back="goBack"
      />
    </div>
    <div class="body">
      <div class="base-message">
        <el-form
          label-width="150px"
          :model="formData"
        >
          <el-form-item label="文章标题">
            <el-input
              v-model="formData.title"
              placeholder="请输入文章标题"
              style="width: 280px"
            />
          </el-form-item>
          <el-form-item label="作者名称">
            <el-input
              v-model="formData.userName"
              placeholder="请输入作者名称"
              style="width: 280px"
            />
          </el-form-item>
          <el-form-item label="文章类别">
            <el-select
              v-model="formData.type"
              placeholder="请选择文章类别"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.type"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="文章内容">
            <div class="introduce">
              <t-editor v-model="formData.content" />
            </div>
          </el-form-item>
        </el-form>
      </div>

      <el-button
        class="add-message"
        type="danger"
        @click="addArticle"
      >点击确认添加文章</el-button>
    </div>
  </div>
</template>

<script>
import { addArticle, getArticleType } from '../../../api/article';

export default {
  components: {

  },
  data() {
    return {
      varietyList: [],
      formData: {
        'content': '',
        'title': '',
        'type': undefined,
        'userName': ''
      },
      options: [
        {
          'id': 1,
          'type': '新闻中心'
        },
        {
          'id': 2,
          'type': '学术研究'
        }
      ]
    };
  },
  created() {
    getArticleType().then(res => {
      if (res.data.code === 200) {
        this.options = res.data.data;
      }
    });
  },
  methods: {
    goBack() {
      this.$emit('update:showIndex', 0);
      this.$emit('goBack');
    },
    addArticle() {
      console.log(this.formData);
      addArticle(this.formData)
        .then((res) => {
          if (res.data.code !== 200) {
            this.$message.error(res.data.code.message);
            return;
          }
          this.goBack();
          this.$message.success('添加成功');
        })
        .catch((err) => {
          console.log(err);
          this.$message.error('添加失败');
        });
    },
    onSelected(val) {
      console.log(val);
      const { province, city, area } = val;
      this.formData.province = province.value;
      this.formData.city = city.value;
      this.formData.county = area.value;
      console.log(val.city.code); //  打印出城市的code
    }
  }
};
</script>
<style lang="scss" scoped>
.card {
  /*background:rgba(255,255,255,1);*/
  // border: 1px solid rgba(211, 211, 211, 1);
  .title {
    width: 100%;
    height: 48px;
    background: rgba(241, 245, 249, 1);
    border: 1px solid rgba(211, 211, 211, 1);
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(27, 33, 63, 1);
    display: flex;
    align-items: center;
    padding-left: 32px;
    position: fixed;
    z-index: 999;
  }
  .body {
    width: 100%;
    padding: 60px;
    .variety-item {
      display: flex;
      .variety-item-title {
        // display: flex;
        // align-items: center;
        // margin-right: 30px;
      }
    }
    .base-message {
    }
    .introduce {
      width: 70%;
    }
  }
}
.add-message {
    margin-top: 50px;
    margin-left: 35px;
}
::v-deep .abstract textarea {
  height: 150px !important;
}
</style>
